<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>认识各国国旗 - 幼儿小游戏</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#E63946',
                        secondary: '#457B9D',
                        accent: '#F1FAEE',
                        neutral: '#1D3557',
                        light: '#F1FAEE',
                    },
                    fontFamily: {
                        comic: ['Comic Sans MS', 'cursive', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .flag-shadow {
                box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
            }
            .btn-bounce {
                transition: transform 0.2s;
            }
            .btn-bounce:hover {
                transform: scale(1.05);
            }
            .btn-bounce:active {
                transform: scale(0.98);
            }
            .pulse-correct {
                animation: pulse-green 0.5s ease-in-out;
            }
            .pulse-wrong {
                animation: pulse-red 0.5s ease-in-out;
            }
            .celebration {
                animation: celebrate 1s ease-out;
            }
            @keyframes pulse-green {
                0%, 100% { box-shadow: 0 0 0 0 rgba(72, 187, 120, 0.7); }
                50% { box-shadow: 0 0 0 15px rgba(72, 187, 120, 0); }
            }
            @keyframes pulse-red {
                0%, 100% { box-shadow: 0 0 0 0 rgba(237, 100, 166, 0.7); }
                50% { box-shadow: 0 0 0 15px rgba(237, 100, 166, 0); }
            }
            @keyframes celebrate {
                0% { transform: scale(1); }
                50% { transform: scale(1.1); }
                100% { transform: scale(1); }
            }
            .countdown {
                position: absolute;
                right: 20px;
                bottom: 20px;
                font-size: 24px;
                font-weight: bold;
                color: rgba(0,0,0,0.3);
            }
            .flag-img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
        }
    </style>
</head>
<body class="bg-gradient-to-br from-accent to-blue-50 min-h-screen font-comic text-neutral">
    <!-- 游戏容器 -->
    <div class="container mx-auto px-4 py-8 max-w-4xl">
        <!-- 游戏标题 -->
        <header class="text-center mb-8">
            <h1 class="text-[clamp(2rem,5vw,3rem)] font-bold text-primary mb-2">认识中国国旗</h1>
            <p class="text-[clamp(1rem,2vw,1.25rem)] text-secondary">找出下面的中国国旗吧！</p>
        </header>
        
        <!-- 分数和排行榜按钮 -->
        <div class="flex justify-between items-center mb-6">
            <div class="bg-white rounded-full px-6 py-3 shadow-md flex items-center">
                <i class="fa fa-star text-yellow-500 mr-2 text-xl"></i>
                <span class="text-lg font-bold">得分: <span id="score" class="text-primary">0</span></span>
            </div>
            <button id="rankingBtn" class="bg-secondary text-white rounded-full px-6 py-3 shadow-md flex items-center btn-bounce">
                <i class="fa fa-trophy mr-2"></i>
                <span>排行榜</span>
            </button>
        </div>
        
        <!-- 游戏区域 -->
        <main class="bg-white rounded-2xl shadow-xl p-6 mb-8 relative">
            <!-- 问题提示 -->
            <div class="text-center mb-6">
                <p class="text-[clamp(1.25rem,3vw,1.5rem)]">哪个是中国国旗？</p>
            </div>
            
            <!-- 国旗选项区域 -->
            <div id="flagsContainer" class="grid grid-cols-2 md:grid-cols-3 gap-4 md:gap-6">
                <!-- 国旗会通过JS动态生成 -->
            </div>
            
            <!-- 倒计时显示（仅错误时显示） -->
            <div id="countdown" class="countdown hidden">3</div>
        </main>
        
        <!-- 反馈信息 -->
        <div id="feedback" class="hidden text-center mb-8 p-4 rounded-xl text-white text-xl font-bold">
            <!-- 反馈信息会通过JS动态显示 -->
        </div>
        
        <!-- 下一题按钮 -->
        <div class="text-center">
            <button id="nextBtn" class="hidden bg-primary text-white rounded-full px-8 py-4 shadow-lg text-lg font-bold btn-bounce">
                下一题 <i class="fa fa-arrow-right ml-2"></i>
            </button>
        </div>
        
        <!-- 排行榜模态框 -->
        <div id="rankingModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
            <div class="bg-white rounded-2xl shadow-2xl p-6 w-11/12 max-w-md transform transition-all">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-2xl font-bold text-primary">排行榜</h2>
                    <button id="closeRanking" class="text-gray-500 hover:text-gray-700">
                        <i class="fa fa-times text-xl"></i>
                    </button>
                </div>
                
                <div id="rankingList" class="space-y-3 mb-6 max-h-64 overflow-y-auto pr-2">
                    <!-- 排行榜内容会通过JS动态生成 -->
                </div>
                
                <div class="text-center">
                    <button id="clearRanking" class="bg-gray-200 text-gray-700 rounded-full px-6 py-2 shadow btn-bounce mr-2">
                        清空记录
                    </button>
                    <button id="closeRankingBtn" class="bg-secondary text-white rounded-full px-6 py-2 shadow btn-bounce">
                        关闭
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 游戏说明 -->
        <footer class="text-center text-gray-600 text-sm mt-12">
            <p>适合3-6岁儿童 | 点击正确的中国国旗得分</p>
        </footer>
    </div>

    <script>
        // 国旗数据 - 删除了巴西和韩国，保留8个国家
        const flags = [
            { 
                name: "中国", 
                // 保持您修改的官方国旗链接
                image: "https://p5.itc.cn/images01/20201001/2f40a7f556dd46d9a6db2f376a4d4b4d.jpeg",
                isChina: true,
                alt: "中国国旗，红色背景左上角有五颗黄色五角星，一大四小，象征中国共产党领导下的革命人民大团结"
            },
            { 
                name: "美国", 
                image: "https://q3.itc.cn/q_70/images01/20240209/2088884a23aa4a219b21b570ac238689.jpeg",
                isChina: false,
                alt: "美国国旗，红白相间的13道宽条和左上角蓝色矩形中的50颗白星"
            },
            { 
                name: "日本", 
                image: "https://pic.rmb.bdstatic.com/bjh/250323/beautify/40a0f57933ae3c235c2a9734f45dd6c9.jpeg",
                isChina: false,
                alt: "日本国旗，白色背景中央有红色圆形"
            },
            { 
                name: "法国", 
                image: "https://img0.baidu.com/it/u=3913714167,4082149424&fm=253&app=138&f=JPEG?w=1200&h=800",
                isChina: false,
                alt: "法国国旗，蓝、白、红三色垂直条纹"
            },
            // 保留的其他国家
            { 
                name: "俄罗斯", 
                image: "https://miaobi-lite.bj.bcebos.com/miaobi/5mao/b%275L%2BE572X5pav55qE5Zu95peX5Zu%2B54mHXzE3MzQ5MDE0MTkuODc0MTI3NA%3D%3D%27/0.png",
                isChina: false,
                alt: "俄罗斯国旗，白、蓝、红三色水平条纹"
            },
            { 
                name: "德国", 
                image: "https://www.chinaflag.com.cn/d/file/p/2021/10-13/a0be59e519d5e74e79bebd11193ba377.jpg",
                isChina: false,
                alt: "德国国旗，黑、红、金三色水平条纹"
            },
            { 
                name: "印度", 
                image: "https://t9.baidu.com/it/u=825059653,269270087&fm=193",
                isChina: false,
                alt: "印度国旗，橙、白、绿三色水平条纹，白色条纹中央有蓝色法轮"
            }
        ];
        
        // 以下代码保持不变
        let currentScore = 0;
        let selectedFlag = null;
        let isAnswered = false;
        let countdownTimer = null;
        
        const flagsContainer = document.getElementById('flagsContainer');
        const scoreElement = document.getElementById('score');
        const feedbackElement = document.getElementById('feedback');
        const nextBtn = document.getElementById('nextBtn');
        const rankingBtn = document.getElementById('rankingBtn');
        const rankingModal = document.getElementById('rankingModal');
        const closeRanking = document.getElementById('closeRanking');
        const closeRankingBtn = document.getElementById('closeRankingBtn');
        const clearRanking = document.getElementById('clearRanking');
        const rankingList = document.getElementById('rankingList');
        const countdownElement = document.getElementById('countdown');
        
        function initGame() {
            currentScore = 0;
            scoreElement.textContent = currentScore;
            generateFlags();
            loadRanking();
        }
        
        function generateFlags() {
            flagsContainer.innerHTML = '';
            feedbackElement.classList.add('hidden');
            nextBtn.classList.add('hidden');
            countdownElement.classList.add('hidden');
            isAnswered = false;
            if (countdownTimer) {
                clearInterval(countdownTimer);
                countdownTimer = null;
            }
            
            const numOptions = Math.floor(Math.random() * 2) + 3;
            const chinaFlag = flags.find(flag => flag.isChina);
            const otherFlags = flags.filter(flag => !flag.isChina);
            const shuffledOthers = shuffleArray([...otherFlags]);
            const selectedOthers = shuffledOthers.slice(0, numOptions - 1);
            const options = shuffleArray([chinaFlag, ...selectedOthers]);
            
            options.forEach(flag => {
                const flagCard = document.createElement('div');
                flagCard.className = 'flag-card btn-bounce cursor-pointer rounded-xl overflow-hidden flag-shadow';
                flagCard.dataset.isChina = flag.isChina;
                flagCard.dataset.country = flag.name;
                
                const imgContainer = document.createElement('div');
                imgContainer.className = 'w-full h-40 bg-gray-50 flex items-center justify-center p-4';
                
                const flagImg = document.createElement('img');
                flagImg.src = flag.image;
                flagImg.alt = flag.alt;
                flagImg.className = 'flag-img max-h-full max-w-full';
                flagImg.onerror = function() {
                    this.parentNode.innerHTML = `<div class="text-center text-gray-500">${flag.name}国旗</div>`;
                };
                
                imgContainer.appendChild(flagImg);
                
                const countryName = document.createElement('div');
                countryName.className = 'bg-neutral text-white text-center py-1 text-sm';
                countryName.textContent = flag.name;
                
                flagCard.appendChild(imgContainer);
                flagCard.appendChild(countryName);
                flagsContainer.appendChild(flagCard);
                
                flagCard.addEventListener('click', () => selectFlag(flagCard));
            });
        }
        
        function selectFlag(card) {
            if (isAnswered) return;
            
            isAnswered = true;
            selectedFlag = card;
            const isChina = card.dataset.isChina === 'true';
            const countryName = card.dataset.country;
            
            feedbackElement.classList.remove('hidden');
            
            if (isChina) {
                currentScore++;
                scoreElement.textContent = currentScore;
                card.classList.add('pulse-correct', 'border-4', 'border-green-500', 'celebration');
                feedbackElement.textContent = `太棒了！这是${countryName}国旗，答对了！`;
                feedbackElement.className = 'text-center mb-8 p-4 rounded-xl bg-green-500 text-white text-xl font-bold celebration';
                
                setTimeout(() => {
                    saveScore();
                    generateFlags();
                }, 1500);
            } else {
                card.classList.add('pulse-wrong', 'border-4', 'border-red-500');
                const correctCard = flagsContainer.querySelector('[data-is-china="true"]');
                correctCard.classList.add('border-4', 'border-green-500');
                
                feedbackElement.textContent = `这是${countryName}国旗，正确答案是中国国旗哦！`;
                feedbackElement.className = 'text-center mb-8 p-4 rounded-xl bg-red-500 text-white text-xl font-bold';
                
                let seconds = 3;
                countdownElement.textContent = seconds;
                countdownElement.classList.remove('hidden');
                
                countdownTimer = setInterval(() => {
                    seconds--;
                    countdownElement.textContent = seconds;
                    
                    if (seconds <= 0) {
                        clearInterval(countdownTimer);
                        saveScore();
                        generateFlags();
                    }
                }, 1000);
            }
        }
        
        function saveScore() {
            const rankings = JSON.parse(localStorage.getItem('flagGameRankings') || '[]');
            rankings.push({
                score: currentScore,
                date: new Date().toLocaleString()
            });
            
            rankings.sort((a, b) => b.score - a.score);
            if (rankings.length > 10) {
                rankings.splice(10);
            }
            
            localStorage.setItem('flagGameRankings', JSON.stringify(rankings));
            loadRanking();
        }
        
        function loadRanking() {
            const rankings = JSON.parse(localStorage.getItem('flagGameRankings') || '[]');
            rankingList.innerHTML = '';
            
            if (rankings.length === 0) {
                const emptyItem = document.createElement('div');
                emptyItem.className = 'text-center py-4 text-gray-500';
                emptyItem.textContent = '暂无记录';
                rankingList.appendChild(emptyItem);
                return;
            }
            
            rankings.forEach((item, index) => {
                const rankItem = document.createElement('div');
                rankItem.className = 'flex justify-between items-center p-3 bg-gray-50 rounded-lg';
                
                let rankIcon = '';
                if (index === 0) rankIcon = '<i class="fa fa-trophy text-yellow-500 mr-2"></i>';
                else if (index === 1) rankIcon = '<i class="fa fa-trophy text-gray-400 mr-2"></i>';
                else if (index === 2) rankIcon = '<i class="fa fa-trophy text-amber-700 mr-2"></i>';
                else rankIcon = `<span class="w-6 inline-block text-center mr-2">${index + 1}</span>`;
                
                rankItem.innerHTML = `
                    <div class="flex items-center">
                        ${rankIcon}
                        <span>第${index + 1}名</span>
                    </div>
                    <div class="flex items-center">
                        <span class="font-bold text-primary mr-4">${item.score}分</span>
                        <span class="text-sm text-gray-500">${item.date}</span>
                    </div>
                `;
                
                rankingList.appendChild(rankItem);
            });
        }
        
        function shuffleArray(array) {
            const newArray = [...array];
            for (let i = newArray.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [newArray[i], newArray[j]] = [newArray[j], newArray[i]];
            }
            return newArray;
        }
        
        nextBtn.addEventListener('click', () => {
            saveScore();
            generateFlags();
        });
        
        rankingBtn.addEventListener('click', () => {
            rankingModal.classList.remove('hidden');
        });
        
        closeRanking.addEventListener('click', () => {
            rankingModal.classList.add('hidden');
        });
        
        closeRankingBtn.addEventListener('click', () => {
            rankingModal.classList.add('hidden');
        });
        
        clearRanking.addEventListener('click', () => {
            if (confirm('确定要清空排行榜记录吗？')) {
                localStorage.removeItem('flagGameRankings');
                loadRanking();
            }
        });
        
        rankingModal.addEventListener('click', (e) => {
            if (e.target === rankingModal) {
                rankingModal.classList.add('hidden');
            }
        });
        
        window.addEventListener('DOMContentLoaded', initGame);
    </script>
</body>
</html>
    